<template>
<teleport to="#back">
    <div class="d-flex justify-content-center  align-items-center h-100 w-100 loading-contaniner ">
<div class="loading-content">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">{{ text || "Loading" }}</span>
</div>
<p class="text-primary samll">{{ text }}</p>
</div>
</div>
</teleport>
</template>



<script lang="ts">
import { DefineComponent,defineComponent,onUnmounted } from "vue";

export default defineComponent({
    props:{
        text:{
            type:String,
        },
    },
    setup(){
        const node = document.createElement("div");
        node.id="back";
        document.body.appendChild(node);
        onUnmounted(()=>{
            document.body.removeChild(node);
        });
    },
});
</script>

<style>
.loading-contanin{
    background-color: rgba(255,255,255,0.5);
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
}
.loading-content{
    text-align:center;
}
</style>
